<template>
    <div>
        <v-header>
            <div slot="left" class="backs_icon"></div>
        </v-header>
    <div class="main_allScroll main">
        <div class="item vux-1px-b">
            <div class="title">收货人</div>
            <input type="text" class="enter" placeholder="请输入收货人姓名" v-model="areatDate.recipientsName" maxlength="12">
        </div>
        <div class="item vux-1px-b">
            <div class="title">手机号码</div>
            <input type="tel" maxlength="11" class="enter" placeholder="请输入正确的手机号码" @keyup="()=>{areatDate.recipientsMobilePhone=areatDate.recipientsMobilePhone.replace(/[^\d]/g,'')}" v-model="areatDate.recipientsMobilePhone">
        </div>
        <div class="item vux-1px-b">
            <div class="title">所在区域</div>
            <div v-on:click="doShowAddress">
                <div :style="areatDate.provinceCode ? {color: '#333333'} : {color: '#ababab'}">{{area}}
                    <div class="right_icon" style="margin-left: 0.24rem"></div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="title">详细地址</div>
            <input type="text" class="enter" placeholder="街道、楼牌号等" v-model="areatDate.recipientsDetailAddress" maxlength="32">
        </div>
        <div class="item">
            <div class="title">设置为默认地址</div>
            <check-icon :value.sync="type"></check-icon>
        </div>
        <div class="foot_add" v-on:click="sbuim">
            <div slot="left">
                <button class="btns">保存</button>
            </div>
        </div>
    </div>
        <v-selectAddress :title="title" placeholder="请选择地址" @on-shadow-change="onShadowChange" @on-hide="logHide" @on-close="doHideAddress" v-model="value" :show.sync="showAddress"></v-selectAddress>
    </div>
</template>
<script>
    import {mapActions, mapState} from 'vuex'
    import {CheckIcon, XButton, Cell, Group} from 'vux'
    import { ADD_ADDRESS,updata_ADDRESS,IS_UPDAADDRESSTELIST } from 'store/address'

    export default {
        name: 'addAddress',
        components: {
            CheckIcon,
            XButton,
            Cell,
            Group
        },
        data() {
            return {
                id:'',
                title: '所在区域',
                area: '省-市-地区',
                type: false,
                areaArr: {},
                value:[],
                //地址选择框
                showAddress: false,
                areatDate: {
                    "deliveryId": "",
                    "recipientsName": "",
                    "recipientsMobilePhone": "",
                    "recipientsProvince": '',
                    "provinceCode": '',
                    "recipientsCity":'',
                    "cityCode": '',
                    "recipientsDistrict": '',
                    "districtCode": '',
                    "recipientsDetailAddress": "",
                    "isDefault": 0
                },
            }
        },
        activated() {
            this.init();
            this.id = this.$route.query.id;

        },
        deactivated(){
            this.setAreaLoca();
        },
        methods: {
            ...mapActions([ADD_ADDRESS,updata_ADDRESS,IS_UPDAADDRESSTELIST]),
            init() {
                this.area = '省-市-地区';
                this.type = false;
                this.areaArr = {
                    ids: ["110000", "110100", "110101"],
                    names: ["北京市", "市辖区", "东城区"],
                }
                this.value=[];
                this.showAddress = false;
                this.areatDate = {
                    "deliveryId": "",
                    "recipientsName": "",
                    "recipientsMobilePhone": "",
                    "recipientsProvince": '',
                    "provinceCode": '',
                    "recipientsCity":'',
                    "cityCode": '',
                    "recipientsDistrict": '',
                    "districtCode": '',
                    "recipientsDetailAddress": "",
                    "isDefault": 0
                };
                if(this.$route.query.id){
                    this.getAddreatInfo(this.$route.query.id);
                }else{
                    Object.assign(this.areatDate,this.getAreaLoca());
                    this.area = this.areatDate.recipientsProvince + this.areatDate.recipientsCity + this.areatDate.recipientsDistrict;
                    if(!this.area ){
                        this.area =  '省-市-地区';
                    }
                    if(this.areatDate.provinceCode){
                        this.value.push(this.areatDate.provinceCode)
                    }
                    if(this.areatDate.cityCode){
                        this.value.push(this.areatDate.cityCode)
                    }
                    if(this.areatDate.districtCode){
                        this.value.push(this.areatDate.districtCode)
                    }
                }

            },
            //获取地址详情
            getAddreatInfo(id){
                this.$ajax.address.queryDeliveryDetailInfo({deliveryId:id})
                    .then((res)=>{
                        this.areatDate = res.body.content;
                        this.area = this.areatDate.recipientsProvince + this.areatDate.recipientsCity + this.areatDate.recipientsDistrict;
                        if(this.areatDate.isDefault == 1){
                            this.type = true
                        }
                        if(this.areatDate.provinceCode){
                            this.value.push(this.areatDate.provinceCode)
                        }
                        if(this.areatDate.cityCode){
                            this.value.push(this.areatDate.cityCode)
                        }
                        if(this.areatDate.districtCode){
                            this.value.push(this.areatDate.districtCode)
                        }
                    })
            },

            doShowAddress() {
                this.showAddress = true     //TODO ylb 更换地址选择框
            },
            doHideAddress(){
              this.showAddress = false
            },
            onShadowChange(ids, names) {
                this.areaArr = {
                    ids: ids,
                    names: names
                }
            },
            logHide(str) {   //隐藏选择地区
              this.showAddress = false
              if (str) {   //str为真时表示点击确认
                    let that = this;
                    that.area = '';
                    this.areaArr.ids.forEach(function (v, i) {
                        if (i == 0) {
                            that.areatDate.provinceCode = v
                            that.areatDate.recipientsProvince = that.areaArr.names[i]
                        }
                        if (i == 1) {
                            if (that.areaArr.names[i].indexOf('市辖') >= 0) {
                                that.areatDate.cityCode = that.areaArr.ids[0]
                                that.areatDate.recipientsCity = that.areaArr.names[0]
                            }else if (!that.areaArr.ids[i] || that.areaArr.ids[i].indexOf('--') >= 0) {
                                that.areatDate.cityCode = that.areaArr.ids[0]
                                that.areatDate.recipientsCity = that.areaArr.names[0]
                            } else {
                                that.areatDate.cityCode = v
                                that.areatDate.recipientsCity = that.areaArr.names[i]
                            }
                        }
                        if (i == 2) {
                            if (!that.areaArr.ids[i] || that.areaArr.ids[i].indexOf('--') >= 0) {
                                that.areatDate.districtCode = that.areaArr.ids[1]
                                that.areatDate.recipientsDistrict = that.areaArr.names[1]
                            }else{
                                that.areatDate.districtCode = v
                                that.areatDate.recipientsDistrict = that.areaArr.names[i]
                            }
                        }
                    })
                    this.areaArr.names.forEach(function (v,i) {
                        if((!v && i>= 1) || (v.indexOf("--")>= 0 && i >= 1)){
                            v = that.areaArr.names[i - 1]
                        }
                        that.area += v;
                    })
                }
            },
            setAreaLoca() {
                if(!this.id){
                    localStorage.setItem('areaLoca', JSON.stringify(this.areatDate))
                }
            },
            getAreaLoca() {
                let areaLoca = localStorage.getItem('areaLoca');
                if (areaLoca) {
                    return JSON.parse(areaLoca);
                } else {
                    return {}
                }
            },
            sbuim() {
                if (!this.areatDate.recipientsName || !this.areatDate.recipientsMobilePhone || !this.areatDate.recipientsDetailAddress) {
                    this.$vux.toast.text('请填写完整', 'middle')
                    return;
                }
                if (!this.areatDate.provinceCode) {
                    this.$vux.toast.text('请选择地址', 'middle')
                    return;
                }
                if (this.comJS.checkIsTel(this.areatDate.recipientsMobilePhone)) {
                    this.$vux.toast.text('请输入正确的手机号', 'middle')
                    return;
                }
                let that = this;
                that.areatDate.isDefault = that.type ? 1 : 0;
                this.$ajax.address.addDelivery(that.areatDate)
                    .then((res) => {
                        that.IS_UPDAADDRESSTELIST(true);
                        let title = "编辑成功",text= "编辑成功";
                        if (that.$route.query.id) {
                            that.updata_ADDRESS(that.areatDate);
                        } else {
                            that.areatDate.deliveryId = res.body.content;
                            that.ADD_ADDRESS(that.areatDate);
                            title = "添加成功";text= "添加成功";
                        }
                        localStorage.removeItem('areaLoca');
                        this.id = 1;
                        that.$router.replace({ path: '/success',query:{
                                type:0,
                                title:title,
                                text:text,

                            }});

                    })
            }
        },
        computed: {
            ...mapState({interactive: state => state.interactive}),
            /*areatDate: function () {
                    let el = {
                        "deliveryId": "",
                        "recipientsName": "",
                        "recipientsMobilePhone": "",
                        "recipientsProvince": this.recipientsProvince,
                        "provinceCode": '',
                        "recipientsCity": this.recipientsCity,
                        "cityCode": '',
                        "recipientsDistrict": this.recipientsDistrict,
                        "districtCode": '',
                        "recipientsDetailAddress": "",
                        "isDefault": 0
                    };
                this.areatDate =  el;
            },*/

        }
    }
</script>
<style lang="less" scoped>
    .main {
        border-top: 1px solid #ebebeb;
        .item {
            font-size: 0.28rem;
            color: #ababab;
            padding: 0.32rem;
            background: #fff;
            border-color: #eeeeee;
            &:last-of-type {
                margin-top: 0.16rem;
            }
            .title {
                font-size: 0.32rem;
                color: #272727;

            }
        }
    }

    .foot_add {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 0.1rem 0.3rem;
        background-color: #fff;
        button {
            width: 100%;
            /*padding: 0.3rem;*/
            height: 0.8rem;
            border-radius: 0.08rem;
            font-size: 0.3rem;
            background: #FDB82C;
            border: none;
            color: #fff;
        }

    }
</style>